@import "@/styles/__index.less";

.person-list {
  flex: 7;
  height: 100%;
  display: flex;
  flex-direction: column;

  .title {
    width: 100%;
    margin-top: 14px;
    font-size: 16px;
    font-weight: bold;
    display: flex;
    align-items: center;

    &::before {
      content: "";
      display: inline-block;
      width: 5px;
      height: 16px;
      margin-right: 6px;
      background: linear-gradient(0deg, #579FFF 0%, #FFFFFF 100%);
      border-radius: 3px;
    }
  }

  .person-wraps {
    flex: 1;
    overflow-y: auto;

    .person-wrap {
      display: flex;
      padding: 10px 0px;
      border-bottom: 2px dashed #8BC1FC66;

      >:nth-child(n) {
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .number {
        flex: 2;
        font-size: 24px;
        font-weight: bold;
        font-style: italic;
        overflow: visible;
        .pmzd-blue;
      }

      .name {
        flex: 3;
      }

      .tag-box {
        flex: 3;

        .tag {
          padding: 2px 12px;
          color: white;
          font-size: 80%;
          border: 1px solid #60A4FF66;
          border-radius: 99px;
          user-select: none;
          display: inline-block;

          &[normal] {
            background-color: #5FADF7;
            color: white;
          }

          &[warn] {
            background-color: #DAA363;
            color: white;
          }

          &[error] {
            background-color: #9D1C1C;
            color: white;
          }
        }
      }

      .arrow {
        flex: 2;
        color: #F8AA47;
      }

      .image-box {
        flex: 3;

        .image {
          width: 60px;
          height: 75px;
          background-color: #60A4FF;
          border-radius: 10px;
          background-size: cover;
          background-position: center;
          background-repeat: no-repeat;
        }
      }
    }
  }
}